<template>
  <div class="gl_heightFull">
    <div class="demo-input-suffix gl_searchBox">
      <el-row :gutter="20">
        <el-col :span="4">
          <p>考生名称</p>
          <el-input v-model="Api_GET_ClubBranchBranchFeeStudentsBranchIdQO.Filter" placeholder="请输入姓名" size="mini" clearable @change="getFeeStudentlist()" />
        </el-col>
        <el-col :span="4">
          <p>缴纳类型</p>
          <el-select v-model="isType" size="mini" @change="getFeeStudentlist()">
            <el-option label="全部" value="" />
            <el-option label="续费" value="Renew" />
            <el-option label="新增" value="New" />
          </el-select>
        </el-col>
        <!-- <el-col :span="4">
          <p>提交机构</p>
          <el-input v-model="Api_GET_ClubBranchBranchFeeStudentsBranchIdQO.Filter" placeholder="请输入姓名" size="mini" clearable />
        </el-col> -->
        <el-col :span="4">
          <el-button type="primary" style="margin-top:25px" size="mini" @click="getFeeStudentlist()">筛选</el-button>
          <el-button type="warning" size="mini" @click="reset()">{{ $t('button.Reset') }}</el-button>
        </el-col>
      </el-row>
    </div>
    <div style="margin-top:15px">
      <el-table v-loading="tableLoading" class="gl_table_noBorder" size="mini" :data="tableData">
        <el-table-column type="index" label="序号" align="center" width="55" />
        <el-table-column label="姓名" width="60">
          <template slot-scope="{row}">
            <!-- <img v-if="row.avatarUrl" class="roodsPhoto" :src="getStaticFileUrl(row.avatarUrl)" alt=""> -->
            <PersonalImage :imgurl="row.avatarUrl" imgheight="60px" />
          </template>
        </el-table-column>
        <el-table-column prop="registerStudent.name" />
        <el-table-column label="证件号码" prop="idCardNumber" />
        <el-table-column label="缴纳类型">
          <template slot-scope="{ row }">
            <span v-if="row.memberFeeTypeCode">
              {{ row.memberFeeTypeCode === 'New'?'新增':'续费' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="会员号" prop="memberNumber" />
        <el-table-column label="缴纳年限" prop="feeYear" />
        <el-table-column label="提交机构" prop="request.organizationUnitName" />
        <el-table-column label="缴费金额" prop="amount">
          <template slot-scope="{ row }">
            {{ parseFloat( row.amount * 100) / 10000 }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-row class="gl_pt_15" style="text-align: right;">
      <el-pagination
        :current-page="Api_GET_ClubBranchBranchFeeStudentsBranchIdQO.Page"
        :page-size="Api_GET_ClubBranchBranchFeeStudentsBranchIdQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>

<script>
import PersonalImage from '@/components/PersonalImage/index';
import { api_GET_ClubBranchBranchFeeStudentsBranchId } from '@/extend/api/hallswaggerApi/app.js';
import { Api_GET_ClubBranchBranchFeeStudentsBranchIdQO } from '@/lib/form/hall/swaggerForm';
export default {
  components: {

    PersonalImage
  },
  data() {
    return {
      totalPage: 0,
      isType: '', // 交费类型
      tableData: [],
      tableLoading: false,
      IsEnabled: '',
      freeDate: [],
      Api_GET_ClubBranchBranchFeeStudentsBranchIdQO: new Api_GET_ClubBranchBranchFeeStudentsBranchIdQO()
    };
  },
  created() {
    this.getFeeStudentlist();
  },
  methods: {
    // 获取缴费名单
    getFeeStudentlist(page) {
      this.tableLoading = true;
      this.Api_GET_ClubBranchBranchFeeStudentsBranchIdQO.OrganizationUnitId = this.$route.query.branchid; // type: string
      this.Api_GET_ClubBranchBranchFeeStudentsBranchIdQO.Page = page || 1;
      this.Api_GET_ClubBranchBranchFeeStudentsBranchIdQO.SkipCount = (this.Api_GET_ClubBranchBranchFeeStudentsBranchIdQO.Page - 1) * this.Api_GET_ClubBranchBranchFeeStudentsBranchIdQO.MaxResultCount;
      this.Api_GET_ClubBranchBranchFeeStudentsBranchIdQO.MemberFeeTypeCode = this.isType;
      this.Api_GET_ClubBranchBranchFeeStudentsBranchIdQO.IncludeRegisterStudent = true;
      this.Api_GET_ClubBranchBranchFeeStudentsBranchIdQO.IncludeRequest = true;
      this.Api_GET_ClubBranchBranchFeeStudentsBranchIdQO.IncludeStatus = true;
      this.Api_GET_ClubBranchBranchFeeStudentsBranchIdQO.FeeRequestId = this.$route.query.id;
      api_GET_ClubBranchBranchFeeStudentsBranchId(this.$route.query.branchid, this.Api_GET_ClubBranchBranchFeeStudentsBranchIdQO).then(res => {
        console.log(res);
        this.totalPage = res.totalCount;
        this.tableLoading = false;
        this.tableData = res.items;
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    topersonal(row) {
      this.$router.push({ name: 'Personal' });
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 分页按钮
    sizeChange(MaxResultCount) {
      this.Api_GET_ClubBranchBranchFeeStudentsBranchIdQO.MaxResultCount = MaxResultCount;
      this.getFeeStudentlist();
    },
    pageIndexChange(currentPage) {
      this.getFeeStudentlist(currentPage);
    },
    // 重置按钮
    reset () {
      this.Api_GET_ClubBranchBranchFeeStudentsBranchIdQO = new Api_GET_ClubBranchBranchFeeStudentsBranchIdQO();
      this.isType = '';
      this.getFeeStudentlist();
    }
  }
};
</script>

<style lang="scss" scoped>
  .roodsPhoto{
    width: 60px;
    height: 60px;
    vertical-align: middle;
  }
</style>
